<lv-layout id="live-design-content" lvDirection="row" lvMinWidth="1000px">
  <lv-sider class="live-design-left-menu-container" lvWidth="256px" lvFixed="true">
    <div class="live-design-logo-container">
      <span class="live-design-logo-text">LIVE Design</span>
    </div>

    <lv-menu class="live-design-left-menu" [lvMenus]="menus" [lvLabelTemplate]="labelTpl" [lvActiveItemId]="activeId"></lv-menu>
  </lv-sider>

  <lv-content class="live-design-content-wrapper" [class.live-design-content-wrapper-dark]="isDarkTheme">
    <lv-header class="live-design-content-header">
      <!--TODO 完善搜索和版本语言切换-->
      <lv-search
        class="live-design-search"
        [class.search-dark]="isDarkTheme"
        [lvPlaceHolder]="'Search'"
        [(ngModel)]="searchValue"
        (ngModelChange)="search($event)"
        lv-popover
        [lvPopoverContent]="resultContent"
        lvPopoverTrigger="customize"
        [(lvPopoverVisible)]="visible"
        lvPopoverPosition="bottom"
        lvPopoverShowArrow="false"
        [lvPopoverClassName]="'live-design-search-result-panel'"
        [lvPopoverTheme]="isDarkTheme ? 'dark' : 'light'"
      ></lv-search>
    </lv-header>

    <router-outlet></router-outlet>
  </lv-content>
</lv-layout>

<ng-template #labelTpl let-data>
  <div class="live-design-left-menu-label-container" [class.with-update-mark]="data.featureType">
    <img *ngIf="MENU_ICON[data.id]" class="left-menu-icon" [src]="MENU_ICON[data.id]" />
    <div lv-overflow>{{ data.label }}</div>
    <lv-tag *ngIf="data.featureType" lvAlarmStatus="customize" class="live-design-update-mark">{{ data.featureType }}</lv-tag>
  </div>
</ng-template>

<ng-template #frameContent let-data>
  <img class="live-design-frame-item-icon" [src]="data.imgUrl" />
  <span>{{ data.label }}</span>
</ng-template>

<!-- 搜索结果 -->
<ng-template #resultContent>
  <div class="live-design-search-result" [class.live-design-search-result-dark]="isDarkTheme">
    <lv-empty *ngIf="!searchResultData.components?.length"></lv-empty>
    <div *ngIf="searchResultData.components.length" class="live-design-search-result-content">
      <ul>
        <li class="live-design-search-result-component-item" *ngFor="let item of searchResultData.components">
          <a (click)="searchResultClick($event, item)" lv-overflow>
            <lv-highlight [lvContent]="searchValue" [lvWholeStr]="getMenuLabel(item.path, item.type)"></lv-highlight>
          </a>
        </li>
      </ul>
    </div>
  </div>
</ng-template>

<ng-template #characterSelectorTpl>
  <lv-radio-group #group [(ngModel)]="selectedCharacter" class="live-design-character-box">
    <lv-group [lvGutter]="'16px'">
      <lv-radio [lvViewType]="'custom'" [lvValue]="USER_TYPE.DEVELOPER">
        <lv-card class="live-design-character-card" lvType="border" [lvChecked]="group.isChecked(USER_TYPE.DEVELOPER)">
          <div>
            <img src="assets/images/site/developer.svg" alt="" />
            <div>开发者</div>
          </div>
        </lv-card>
      </lv-radio>
      <lv-radio [lvViewType]="'custom'" [lvValue]="USER_TYPE.DESIGNER">
        <lv-card class="live-design-character-card" lvType="border" [lvChecked]="group.isChecked(USER_TYPE.DESIGNER)">
          <div>
            <img src="assets/images/site/designer.svg" alt="" />
            <div>设计师</div>
          </div>
        </lv-card>
      </lv-radio>
    </lv-group>
  </lv-radio-group>
</ng-template>
